<template>
  <div>
    <el-dialog
      :title="$t('选择代理')"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="1000px"
    >
      <div class="head_box">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >{{ $t("全选") }}</el-checkbox
        >
      </div>

      <div class="list_box">
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
          class="u-f u-fw"
        >
          <li class="li" v-for="agent in cities" :key="agent.agency_id">
            <el-checkbox class="u-f u-f-ac" :label="agent.name">{{
              agent.name
            }}</el-checkbox>
          </li>
        </el-checkbox-group>
      </div>

      <div class="btn_box u-f u-f-ac u-f-je">
        <el-button type="primary" @click="handleChange">{{
          $t("提交")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
  name: "changeAgent",
  data() {
    return {
      isShow: false,
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
    };
  },
  props: {
    defaultArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    show() {
      this.isShow = true;
      if (this.defaultArr.length > 0) {
        setTimeout(() => {
          this.handleDefault();
        }, 150);
      } else {
        this.cities = [];
        this.checkedCities = [];
        this.checkAll = false
        setTimeout(() => {
          this.getData();
        }, 150);
      }
    },
    handleDefault() {
      this.checkedCities = [];
      for (let item of this.defaultArr) {
        this.checkedCities.push(item.name);
      }
      this.getData();
    },
    getData() {
      util
        .$http("/screenAdv/deviceDialog", {
          type: "agency",
        })
        .then((res) => {
          if (res.code == 1) {
            this.cities = res.data;
          }
        });
    },
    handleCheckAllChange(val) {
      if (val) {
        for (let item of this.cities) {
          this.checkedCities.push(item.name);
        }
      } else {
        this.checkedCities = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleChange() {
      this.isShow = false;
      let arr = [];
      for (let item of this.cities) {
        for (let checkitem of this.checkedCities) {
          if (item.name == checkitem) {
            arr.push(item);
          }
        }
      }
      setTimeout(() => {
        this.$emit("hide", arr);
      }, 500);
    },
  },
};
</script>

<style scoped>
.head_box {
  margin-bottom: 30px;
}
.li {
  width: 22%;
  list-style: none;
  margin-bottom: 15px;
  margin-right: 4%;
}
.li:nth-of-type(4n) {
  margin-right: 0;
}
.pagination_box {
  padding-top: 30px;
}
.pagination_box .el-pagination {
  display: flex;
  justify-content: flex-end;
}
.btn_box {
  margin-top: 40px;
}
</style>

<style>
.el-checkbox__label {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}
</style>
